<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Links</title>
    <meta name="description" content="Links – A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
    <script src="../../js/vendor/LegacyJSONLoader.js"></script>
    <script src="js/components/aframe-tooltip-component.js"></script>
    <script src="js/components/camera-position.js"></script>
    <script src="js/components/ground.js"></script>
    <script src="vendor/LegacyJSONLoader.js"></script>
    <script src="js/components/link-controls.js"></script>
    <script src="shaders/skyGradient.js"></script>
  </head>
  <body>
    <a-scene fog="color: #241417; near: 0; far: 30;" raycaster="far: 100; objects: [link];" cursor="rayOrigin: mouse" camera-position>
      <a-assets>
        <img id="thumbHome" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/home.png">
        <img id="thumbSunrise" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/sunrise.png">
        <img id="thumbCity" crossOrigin="anonymous" src="https://cdn.aframe.io/link-traversal/thumbs/city.png">
      </a-assets>
      <a-link href="index.html" position="-3.5 1.5 -1.0" image="#thumbHome"></a-link>
      <a-link href="sunrise.html" position="0 1.5 -1.0" image="#thumbSunrise"></a-link>
      <a-link href="city.html" position="3.5 1.5 -1.0" image="#thumbCity"></a-link>
      <a-entity id="sky"
                geometry="primitive: sphere; radius: 65;"
                material="shader: skyGradient; colorTop: #1F1E36; colorBottom: #47c9ff; side: back"></a-entity>
      <a-entity ground='url: https://cdn.aframe.io/link-traversal/models/groundMountains.json'></a-entity>
      <a-entity light="type: point; color: #f4f4f4; intensity: 0.4; distance: 0" position="0 2 0"></a-entity>
      <a-entity id="leftHand" link-controls="hand: left"></a-entity>
      <a-entity id="rightHand" link-controls="hand: right"></a-entity>
    </a-scene>
  </body>
</html>
